<template>
  <div class="weather30">
    <detail :detail="clickItem" :word="word" />
    <calendar :day30="day30" />
  </div>
</template>

<script>
export default { name: "weather" };
</script>
<script setup>
import detail from "./cpns/detail.vue";
import calendar from "./cpns/calendar.vue";

import usePublicStore from "@/stores/modules/public";
import useWeather30Store from "@/stores/modules/weather30";
import { storeToRefs } from "pinia";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const weatherStore = useWeather30Store();
watch(city, (newCity) => {
  weatherStore.fetchWeather30Data(newCity, code.value);
});
city.value && weatherStore.fetchWeather30Data(city.value, code.value);
// weatherStore.fetchWeather30Data("guangzhou", 101280101);

const { word, day30, clickItem } = storeToRefs(weatherStore);
</script>

<style lang="less" scoped>
.weather30 {
  max-width: 1180px;
  margin: 0 auto;
}
</style>